<template>
    <div class="section-wrap" id="illegalDetails2">
        <div class="headerBox">
            <div class="header">
                <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>
                我的违章登记
            </div>
        </div>
        <div class="form-section" id='m1' style="margin-top: 40px;margin-bottom: 0;"
        >
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.departName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目管理单位</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.panrentDepartName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>业主项目经理</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.charge" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章登记人</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizRegisterPerson" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizDate" disabled> 
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章人员名称</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizPersonName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章地点</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizAddress" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label class="kk">违章人员所属参建单位</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizPersonDepartName" disabled>
                </div>
            </div>
            <div  class="form-item form-item-style1"  style="height: 140px;flex-wrap: wrap;height: auto;">
                <div class="label-title" style="display: block;line-height: normal;">
                <label>违章图片</label>
                </div>
                <div style="float:left;display: flex;flex-wrap: wrap;">
                <img  v-for="(item,index) in list" :key="index" :src="item.src" alt="" @click="previewImg(item.url)" style="width:80px;height:80px;margin-right:10px;">
                </div>

            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章迹象</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizPhenItemListName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章编号</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizNo" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章标准编号</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizPhenItemListNo" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章整改期限</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizAbarbeitungEndDate" disabled>
                </div>
            </div>

            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收单位</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizCheckDepartName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收人员</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.weizCheckPersonName" disabled>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章现象抄送人</label>
                </div>
                <div class="input_div" @click="getGroup()">
                    <input type="text"
                    placeholder="请选择"
                    disabled 
                    v-model="info.copytoPersonName">
                    <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
                </div>
            </div>
            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章现象抄送人</label>
                </div>
                <div class="input_div">
                    <input type="text" v-model="info.checkNo" disabled>
                </div>
            </div> -->
            <!-- 新增选项 -->
            <div class="model" v-for="(item,index) in info.rectifyList" :key="index">
                <!-- 违章整改信息 查-->
                <div v-if='item.rectifystatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章整改信息第({{index+1}})</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckZrrName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
                        <group style="margin-right:-20px">
                            <input type="text" v-model="item.rectifydate" disabled style="padding-right:20px">
                        </group>
                    </div>
                    <div class="imgDiv">
                        <div class="left_label">违章整改后图片</div>
                        <div class="imgUl" >
                            <img :src="data.url" alt="" @click="previewImg(data.url)" v-for="(data,index) in item.rectifyImgList" :key="index">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改情况回复</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.rectifydateRemark" disabled placeholder="暂无...">
                        </div>
                    </div>
                </div>
                <!-- 违章验收信息 查-->
                <div v-if='item.checkstatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章验收信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收人员</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckPersonName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>验收时间</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkdate" disabled>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收结论</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkResults" disabled>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收方式</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkMode" disabled>
                        </div>
                    </div>
                    <div class="imgDiv">
                        <div class="left_label">违章验收图片</div>
                        <div class="imgUl" >
                            <img :src="data.url" @click="previewImg(data.url)" alt="" v-for="(data,index) in item.checkImgList" :key="index">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收意见</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkIdea" disabled placeholder="暂无">
                        </div>
                    </div>
                </div>
                <!-- 违章整改信息 改-->
                <div v-if="info.status==1 && item.rectifystatus==0">
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章整改信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckZrrName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
                        <group style="margin-right:-20px" >
                            <datetime v-model="end" format='YYYY-MM-DD HH:mm' :start-date="startDate"></datetime>
                        </group>
                    </div>
                     <div class="form-item form-item-style2">
                        <div class="label-title space-between">
                            <label>违章整改后图片</label>
                        </div>
                        <div class="upload-wrap">
                            <upload5 
                            :imgList="item.rectifyImgList"
                            @setFormData="setYSFormData"
                            ></upload5>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改情况回复</label>
                        </div>
                        <div class="input_div" @click="classValue=true">
                            <input type="text" v-model="rectifydateRemark" disabled placeholder="请输入">
                        </div>
                    </div>
                </div>
                <!-- 违章验收信息 改 -->
                <div v-if="info.status==2 && item.checkstatus==0">
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章验收信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收人员</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckZrrName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>验收时间</label>
                        </div>
                        <group style="margin-right:-20px">
                            <datetime v-model="end2" format='YYYY-MM-DD HH:mm' :start-date="startDate"></datetime>
                        </group>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收结论</label>
                        </div>
                        <div class="input_div" @click="conclusion=true">
                            <input type="text" v-model="date1" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收方式</label>
                        </div>
                        <div class="input_div" @click="way=true">
                            <input type="text" v-model="date2" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="imgDiv">
                        <div class="left_label">违章验收图片</div>
                        <div class="upload-wrap">
                            <upload6 
                                :imgList="item.checkImgList"
                                @setFormData="setYSFormData"
                            ></upload6>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收意见</label>
                        </div>
                        <div class="input_div" @click="classValue2=true">
                            <input type="text" v-model="checkIdea2" disabled placeholder="请输入">
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns_div">
                <a class="submitBtn" @click="enter">提 交</a>
                <a class="cancelBtn" @click="$router.go(-1)">取消</a>
            </div>
        </div>
        <div v-transfer-dom>
            <popup v-model="classValue" width="100%" height="300px">
                <group>
                     <x-textarea :max="200" name="description" placeholder="请输入" v-model="checkArea" id="tt"></x-textarea>
                </group>
                <p class="transfer_p"><span @click="ent">确定</span> <em @click="checkArea=''">清空</em></p>
            </popup>
            <popup v-model="classValue2" width="100%" height="300px">
                <group>
                     <x-textarea :max="200" name="description" placeholder="请输入" v-model="checkArea2" id="tt"></x-textarea>
                </group>
                <p class="transfer_p"><span @click="ent2">确定</span> <em @click="checkArea2=''">清空</em></p>
            </popup>
        </div>
        <actionsheet v-model="conclusion" :menus='conclusionList' show-cancel @on-click-menu='click1'></actionsheet>
        <actionsheet v-model="way" :menus='wayList' show-cancel @on-click-menu='click2'></actionsheet>
        <el-dialog :visible.sync="flag"  fullscreen center>
          <img :src="selectImg" alt="" width="100%">
        </el-dialog>
        <popup v-model="classValuecs" width="100%" >
            <select-user :data="datacs" @selectUser='selectUsercs'></select-user>
        </popup>
    </div>
</template>
<script>
import upload5 from "@/commonComponents/upload/upload5";
import upload6 from "@/commonComponents/upload/upload6";
import selectUser from "@commonComponents/selectUser/selectUser";
import formatDate from "../../utils/formatDate";
import {Group,Actionsheet,TransferDom,Popup,XTextarea} from 'vux'
import LoadMore from "vux/src/components/load-more/index";
export default {
  data() {
    return {
       selectImg: '',
       flag: false,
       uploadLength:'',
       startDate:'',
       end:'',
       end2:'',
       params: {
        id:'',
       },
       conclusion:false,
       date1:'',
       datacs:[],
       way:false,
       date2:'',
       conclusionList:{index1:'合格',index2:'不合格'},
       wayList:{index1:'现场验收',index2:'资料验收'},
       info:{
           rectifyList:{
               rectifydate:'',
               rectifydateRemark:'',
               checkdate:'', // 验收时间
               checkResults:'', // 结论
               checkMode:'', //方式
               checkIdea:'' // 验收意见
              }
       },
       classValue:false,
       classValue2:false,
       classValuecs:false,
       checkArea:'',
       checkArea2:'',
       imgList:[],
       rectifydateRemark:'',
        YSFormData: "",
        YSuploadLength: "",
        num:false,
        subBtn:false,
        checkIdea2:'',
        list:[],
        options: {
            getThumbBoundsFn (index) {
                let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                let rect = thumbnail.getBoundingClientRect()
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
        },
    };
  },
  components: {
      Popup,
      XTextarea,
      upload5,
      upload6,
      Actionsheet,
      selectUser
  },
  directives:{
      TransferDom
  },
  created() {
        var myDate = new Date(); //实例一个时间对象；
        myDate.getFullYear();   //获取系统的年；
        myDate.getMonth()+1;   //获取系统月份，由于月份是从0开始计算，所以要加1
        var m =myDate.getMonth()+1<10?'0'+(myDate.getMonth()+1):myDate.getMonth()+1
        myDate.getDate(); // 获取系统日，
        var day = myDate.getDate()<10?'0'+myDate.getDate():myDate.getDate()
        var hours = myDate.getHours()<10?'0'+myDate.getHours():myDate.getHours()
        var min =myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes()
        this.startDate=myDate.getFullYear()+'-'+m+'-'+day
        this.getInfo();

                // 人员接口
        this.$axiosAjax.getDivision({classifyId: ''}).then((res) => {
            if (res.data.success == true) {
                this.datacs = res.data.result
            }
        }).catch((err) => {
            console.log(err)
            }
        )
  },
  methods: {
    getGroup () {
        this.classValuecs = true;
    },
    // 抄送人员选择
    selectUsercs(data) {
        // 抄送人
        this.info.copytoPersonName=data.userName
        this.info.copytoPersonId=data.id
        this.classValuecs = false
    },
    previewImg(url){//图片预览
      this.selectImg=url
      this.flag=true
    },
    logIndexChange (arg) {
        console.log(arg)
    },
    // 图片放大
    show (index) {
        console.log(index)
        this.$refs.previewer.show(index)
    },
    click1(index,val){
          this.date1=val
    },
    click2(index,val){
          this.date2=val
    },
    time(){
          this.num=true
    },
    setYSFormData (formData, uploadLength, fileName) {
            this.YSFormData = formData;
            this.uploadLength = uploadLength;
    },
    ent(){
          this.rectifydateRemark=this.checkArea
          this.classValue=false
    },
    ent2(){
          this.checkIdea2=this.checkArea2
          this.classValue2=false
    },
    getInfo() {
        var useraccount=window.localStorage.getItem('useraccount')
       this.params.id=this.$route.query.id; //id
       this.$axiosAjax.illegalGet(this.params).then(res => {
          if (res.data.success == true) {
             this.info = res.data.result;
             console.log(1122)
             this.rectifyListArr=res.data.result.rectifyList
            var arrImg =[]
            var obj =[]
            for(var k of res.data.result.projectImgList){
                obj.src =k.url
                obj.w=1200
                obj.h=900
                arrImg.push(obj)
            }
            this.list=arrImg
            for (var j of res.data.result.rectifyList){
                if(j.checkstatus==0){
                    this.date1=j.checkResults
                    this.date2=j.checkMode
                    this.checkIdea=j.checkIdea
                    var t=j.checkdate
                    this.end2=t.slice(0,16)
                    this.end2=this.end2.replace('T',' ')
                }else if(j.rectifystatus==0){
                    var t=j.rectifydate
                    this.end=t.slice(0,16)
                    this.end=this.end.replace('T',' ')
                    this.rectifydateRemark=j.rectifydateRemark
                } 

                this.$store.state.illegalDepartId =j.id   
            }
             
          }
        }).catch(err => {})
    },
    enter(){
        debugger
        for (var k of this.info.rectifyList){
            if (k.rectifystatus==0){
                k.rectifydateRemark=this.rectifydateRemark
                k.rectifydate=this.end+':00'
                if(this.end&&this.uploadLength&&k.rectifydateRemark ){
                    this.info.status = this.info.status + 1
                    this.$axiosAjax.illegalSubmit(this.info).then(res => {
                        console.log(res,111)
                    if (res.data.success == true) {
                        this.$router.go(-1)
                    }
                    }).catch(err => {
                        console.log(err)
                    })
                } else if (!this.uploadLength){
                    this.$vux.toast.text('违章整改图片必填')
                } else if (!this.end){
                    this.$vux.toast.text('整改完成时间必填')
                } else if (!k.rectifydateRemark){
                    this.$vux.toast.text('整改情况回复必填')
                }
            }
            if (k.rectifystatus==1 && k.checkstatus==0){
                k.checkIdea=this.checkArea2
                k.checkResults=this.date1
                k.checkMode=this.date2
                k.checkdate=this.end2+':00'
                if(k.checkResults == "合格" ){
                    this.info.status = this.info.status + 1
                    this.$axiosAjax.illegalSubmit(this.info).then(res => {
                        console.log(res,111)
                    if (res.data.success == true) {
                        this.$router.go(-1)
                    }
                    }).catch(err => {
                        console.log(err)
                    })
                } else if (k.checkResults == "不合格"){
                    if(this.checkArea2==null || this.checkArea2.trim() =="") {
                        this.$vux.toast.text('不合格需要填写违章验收意见!', 0)
                    } else {
                        this.info.status = this.info.status + 1
                        this.$axiosAjax.illegalSubmit(this.info).then(res => {
                            console.log(res,111)
                        if (res.data.success == true) {
                            this.$router.go(-1)
                        }
                        }).catch(err => {
                            console.log(err)
                        })
                    } 
                }
            }
        }

    },
    save(){
        for (var k of this.info.rectifyList){
            if (k.rectifystatus==0){
                k.rectifydateRemark=this.rectifydateRemark
                k.rectifydate=this.end+':00'
            }
            if (k.checkstatus==0){
                k.checkIdea=this.checkIdea2
                k.checkResults=this.date1
                k.checkMode=this.date2
                k.checkdate=this.end+':00'
            }
        }
        console.log(this.info)
        this.$axiosAjax.illegalSubmit(this.info).then(res => {
            console.log(res,111)
          if (res.data.success == true) {
              this.$router.go(-1)
          }
        }).catch(err => {
            console.log(err)
        })
    }
  },

};
</script>
<style lang="less" socped>
#illegalDetails2{
    position: relative;
    .form-item-style1{
      height: 55px;
      line-height: 55px;
    }
    .kk{
        width: 140px;
    }
    .form-item {
        margin-left: 0;
        padding-left: 20px;
        label {
            font-weight: normal;
        }
        .input_div {
            input{
                height: 40px;
                line-height: 40px;
                color: #333;
            }
            > span:first-child {
            margin-left: 0;
            }
            .vux-x-icon {
            fill: #333;
            float: right;
            margin-top: 17px;
            }
        }
    }
    .form-item .vux-cell-value{
        height: 55px;
        line-height:55px;
    }
    .imgDiv{
        border-bottom: 1px solid rgb(239, 239, 244);
        padding: 0 20px;
        .left_label{
            height: 40px;
            font-size: 14px;
            line-height: 40px;
        }
        .imgUl{
            width: 100%;
            margin-bottom: 6px;
            img{
                width: 50px;
                height: 50px;
                margin: 2px 2px 0 0;
            }
        }
    }
    .btns_div {
        background: #ebeef2;
        padding: 30px 20px 55px;
        justify-content: space-between;
        display: flex;
        a {
            height: 40px;
            border-radius: 20px;
            display: inline-block;
            width: 140px;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
        .submitBtn {
            background: #469b7a;
        }
        .cancelBtn {
            background: #ffb400;
        }
    }
    .form-item .weui-cell_access .weui-cell__ft::after{
        margin-top: -5px;
    }
    .vux-cell-primary{
        height: 40px;
        border-top:0!important;
        .vux-cell-value{
            margin-top: 0;
        }
    }
    .form-item .vux-no-group-title{
        height: 40px!important;
    }
}
    .transfer_p{
        padding: 10px 20px;
        height: 30px;
        span,em{
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            border-radius: 5px;
            color: #fff;
        }
        span{
            float: left;
            background-color:#2abf72;
        }
        em{
            float: right;
            background-color: #ceaa6c;
        }
    }
    .weui-cell__bd{
        height: 200px!important;
    }
    #tt {
        background-color: #eee;
        .weui-cell__bd .weui-textarea{
            height: 180px!important;
            background-color: #fff;
        }
    }
</style>
